<template>
	<view class="content">
		<image class="bj-img" src="../../static/user_top_bg@2x.png" mode="widthFix"></image>
		<view class="content-box" :style="{paddingTop:topXp+'px'}">
			<view class="top-nav-box">
				<view class="top-nav-box-left" :style="{height:headerHight+'px'}" @click="gotoIndex">
					<u-icon name="arrow-left" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="user-news-box">
				<image class="user-logo" v-if="userData.img" :src="userData.img" mode=""></image>
				<view class="user-logo-none" v-else>
					<u-icon name="account-fill" color="#fff" size="55"></u-icon>
				</view>
				<view class="user-name">{{userData.nickname}}</view>
				<view class="jubao-icon" @click.stop="jbshow = true" v-if="!is_userSelf">
					<u-icon name="more-dot-fill" size="24" color="#333"></u-icon>
				</view>
			</view>
			<view class="user-qianming">
				{{userData.introduction ? userData.introduction : '没个性，不签名'}}
			</view>
			<view class="top-header-bottom">
				<view class="top-header-bottom-item">
					<view class="top-header-bottom-one">{{userData.follow ? userData.follow : '0'}}</view>
					<view class="top-header-bottom-two">关注</view>
				</view>
				<view class="top-header-bottom-item">
					<view class="top-header-bottom-one">{{userData.fans ? userData.fans : '0'}}</view>
					<view class="top-header-bottom-two">粉丝</view>
				</view>
				<view class="top-header-bottom-item">
					<view class="top-header-bottom-one">{{userData.likes ? userData.likes : '0'}}</view>
					<view class="top-header-bottom-two">获赞</view>
				</view>
				<view class="huiguan-btn" @click.stop="guanzhuFun" v-if="!gzSb">
					添加关注
				</view>
				<view class="huiguan-btn-none" @click.stop="guanzhuFun" v-if="gzSb">
					<span>取消关注</span> 
				</view>
			</view>
			<view class="community-list">
				<view class="community-list-left">
					<view class="community-list-item" v-for="(item,index) in goods" :key="item" v-if="index%2 == 0" @click="gotoDetail(item)">
						<view class="content-img-box">
							<image class="content-img" :src="item.image" mode="aspectFit"></image>
							<!-- <view class="content-tip">审核中</view> -->
						</view>
						<view class="content-item-bottom">
							<view class="content-item-bottom-title">{{item.title}}</view>
							<view class="content-item-bottom-content">
								<view class="content-item-bottom-content-left">
									<image class="user-logo-bottom" :src="item.user.img" mode="scaleToFill"></image>
									<p>{{item.user.nickname}}</p>
								</view>
								<view class="content-item-bottom-content-right">
									<view class="content-item-bottom-content-right-item">
										<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
										<p>{{item.likes}}</p>
									</view>
									<view class="content-item-bottom-content-right-item">
										<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
										<p>{{item.share}}</p>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="community-list-right" >
					<view class="community-list-item" v-for="(item,index) in goods"  :key="item" v-if="index%2 == 1" @click="gotoDetail(item)" >
						<view class="community-list-item">
							<view class="content-img-box">
								<image class="content-img" :src="item.image" mode="aspectFit"></image>
								<!-- <view class="content-tip">审核中</view> -->
							</view>
							<view class="content-item-bottom">
								<view class="content-item-bottom-title">{{item.title}}</view>
								<view class="content-item-bottom-content">
									<view class="content-item-bottom-content-left">
										<image class="user-logo-bottom" :src="item.user.img" mode="scaleToFill"></image>
										<view>{{item.user.nickname}}</view>
									</view>
									<view class="content-item-bottom-content-right">
										<view class="content-item-bottom-content-right-item">
											<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
											<view>{{item.likes}}</view>
										</view>
										<view class="content-item-bottom-content-right-item">
											<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
											<p>{{item.share}}</p>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet @select="selectClickjb" @close="jbshow = false" :actions="jblist" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="jbshow"></u-action-sheet>
		<u-action-sheet @select="selectClickjbFun" @close="jbshowTf = false" title="请选择举报理由" :actions="jblistcontent" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="jbshowTf"></u-action-sheet>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	
	export default{
		data(){
			return{
				topXp:null,
				headerHight:0,
				user_id:null,//当前作者
				userData:{},
				goods:[],
				page:1,
				gzSb:false,//是否关注
				user_id_this:'',//指当前用户
				is_dibu:false,
				jblist:[
					{
						name: '我要举报',
						id:303,
					},
				],
				jblistcontent:[
					//举报内容
					{
						name: '色情低俗信息',
					},
					{
						name: '违禁品信息',
					},
					{
						name: '政治敏感信息',
					},
					{
						name: '广告信息',
					},
					{
						name: '涉嫌辱骂及个人隐私',
					},
					{
						name: '涉未成年人不良信息',
					},
				],
				jbshow:false,//是否举报
				jbshowTf:false,//举报内容
				is_userSelf:false,//是否本人
			}
		},
		onLoad(e) {
			this.user_id = e.id 
			this.getTop()
			this.getUserNewsFun()
			this.getUserWorksListFun()
			this.user_id_this = uni.getStorageSync('uid')
			this.user_id == this.user_id_this ? this.is_userSelf = true : this.is_userSelf = false
			console.log(this.is_userSelf)
		},
		onReachBottom(){
			if(!is_dibu){
				this.page++
				this.getUserWorksListFun()
			}else{
				uni.showToast({
					title:'已到达底部',
					icon:'none'
				})
			}
		},
		methods:{
			getTop(){
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topXp =  menuButtonInfo.top
				this.headerHight = menuButtonInfo.height
			},
			getUserNewsFun(){
				http.getUserNews({
					user_id:this.user_id
				}).then((res)=>{
					this.userData = res.data.result
					//是否关注作者
					if(this.user_id_this){
						http.getIsUserFollow({
							user_id:this.user_id_this,
							follow_id:this.user_id
						}).then((res)=>{
							this.gzSb = res.data.result == 0 ? false : true
						})
					}
				})
			},
			getUserWorksListFun(){
				uni.showLoading()
				http.getUserWorksList({
					limit:10,
					page:this.page,
					user_id:this.user_id
				}).then((res)=>{
					uni.hideLoading()
					let data = res.data.result
					if(data){
						data.forEach((item)=>{
							if(item.auditing_status == 1){
								this.goods.push(item)
							}
						})
					}else{
						this.is_dibu = true
					}
				})
			},
			//关注
			guanzhuFun(){
				if(!this.gzSb){
					http.getUserFollow({
						user_id:this.user_id_this,
						follow_id:this.user_id
					}).then((res)=>{
						if(res.data.code == 200){
							uni.showToast({
								title:'关注成功',
								icon:'none'
							})
							this.getUserNewsFun()
						}
					})
				}else{
					http.getUserFollowF({
						user_id:this.user_id_this,
						follow_id:this.user_id
					}).then((res)=>{
						if(res.data.code == 200){
							uni.showToast({
								title:'取消关注',
								icon:'none'
							})
							this.getUserNewsFun()
						}
					})
				}
			},
			gotoIndex(){
				var pages = getCurrentPages();
				let firstPage = pages[0];
				var page = pages[pages.length - 1];
				var pathUrl = page.route;
				      // 判断首页是否是当前页
				  if (firstPage.route === pathUrl) {
					uni.navigateTo({
						url:'/pages/index/index'
					})
				  } else {
					console.log('当前页不是第一页');
					uni.navigateBack({
						delta: 1
					});
				  }
				
			},
			gotoDetail(item){
				uni.navigateTo({
					url:"/pages/work/workDetails?wid="+item.id
				})
			},
			//我要举报
			selectClickjb(item){
				if(item.id == 303){
					this.jbshowTf = true
				}
			},
			selectClickjbFun(item){
				http.getUserReport({
					user_id:this.user_id_this,
					report_user_id:this.user_id,
					content:item.name
				}).then((res)=>{
					uni.showToast({
						title:res.data.result,
						icon:'success'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		position: relative;
		.bj-img{
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
		}
		.content-box{
			width: 100%;
			position: absolute;
			z-index: 2;
			.top-nav-box{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				box-sizing: border-box;
				padding-left: 15px;
				.top-nav-box-left{
					display: flex;
				}
			}
			.user-news-box{
				width: 100%;
				box-sizing: border-box;
				padding: 0 22px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 22px;
				position: relative;
				.user-logo{
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
				.user-logo-none{
					width: 60px;
					height: 60px;
					text-align: center;
					line-height: 60px;
					background-color: #789EFF;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.user-name{
					margin-left: 12px;
					font-size: 18px;
				}
				.jubao-icon{
					position: absolute;
					top: 0;
					right: 22px;
				}
			}
			.user-qianming{
				width: 100%;
				box-sizing: border-box;
				padding: 0 22px;
				margin-top: 7px;
				color: #999;
				font-size: 12px;
			}
			.top-header-bottom{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-top: 20px;
				box-sizing: border-box;
				padding: 0 22px;
				position: relative;
				.top-header-bottom-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 16px;
					color: #333;
					line-height: 25px;
					margin-right: 40px;
					.top-header-bottom-two{
						color: #999;
						font-size: 12px;
					}
				}
				.huiguan-btn{
					width: 100px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					color: #fff;
					font-size: 14px;
					border-radius: 10px;
					background: $main-color;
					position: absolute;
					right: 22px;
					top: 10px;
				}
				.huiguan-btn-none{
					width: 100px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					color: #fff;
					font-size: 14px;
					border-radius: 10px;
					background: rgba(0,0,0,0.8);
					position: absolute;
					right: 22px;
					top: 10px;
				}
			}
			.community-list{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				margin-top: 15px;
				background: $bg-color;
				.community-list-left{
					width: 100%;
					box-sizing: border-box;
					padding-left: 10px;
					padding-right: 5px;
				}
				.community-list-right{
					width: 100%;
					box-sizing: border-box;
					padding-right: 10px;
					padding-left: 5px;
				}
				.community-list-item{
					width: 100%;
					margin-bottom: 10px;
					border-radius: 15px;
					overflow: hidden;
					background: #fff;
					.content-img-box{
						width: 100%;
						height: 185px;
						position: relative;
						.content-img{
							width: 100%;
							height: 100%;
							display: block;
							margin: 0 auto;
						}
						.content-tip{
							padding: 5px 10px;
							position: absolute;
							top: 0;
							right: 0;
							background: rgba(0,0,0,0.5);
							color: #fff;
							font-size: 12px;
						}
					}
					.content-item-bottom{
						width: 100%;
						box-sizing: border-box;
						padding:10px 10px;
						background: #fff;
						border-top: 1px solid #f2f2f2;
						overflow: hidden;
						.content-item-bottom-title{
							font-size: 14px;
							color: #000;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							width: 100%;
							margin-bottom: 10px;
						}
						.content-item-bottom-content{
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							font-size: 12px;
							.content-item-bottom-content-left{
								width: calc(100% - 80px);
								display: flex;
								flex-direction: row;
								align-items: center;
								.user-logo-bottom{
									width: 20px;
									height: 20px;
									border-radius: 50%;
									margin-right: 5px;
								}
								p{
									width: calc(100% - 25px);
									overflow: hidden;
									text-overflow:ellipsis;
									white-space: nowrap;
								}
							}
							.content-item-bottom-content-right{
								width: 53px;
								max-width: 50%;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								color: #999;
								.content-item-bottom-content-right-item{
									display: flex;
									flex-direction: row;
									align-items: center;
									margin-right: 5px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>